<template>
  <div class="dynamic">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <template  v-for="item in dynamicList">
        <div class="dynamicBox" :key="item.id" v-if="JSON.parse(item.json).video" >
          <!-- 头像 -->
          <div class="headImg" v-if="JSON.parse(item.json).video">
            <div class="head">
              <img :src="item.user.avatarUrl" alt />
            </div>
            <span>v</span>
          </div>
          <!-- 头像 end-->
          <!-- 内容 -->
          <div class="dynamicContent" v-if="JSON.parse(item.json).video" @click="goDynamicDetails(item)">
            <div class="dynamicContent_top">
              <div class="title">
                <span class="name">{{item.user.nickname}}</span>
                <span>发布视频：</span>
                <p v-if="item.rcmdInfo">{{item.rcmdInfo.userReason}}</p>
              </div>
              <!-- <div class="btn" @click.stop="follow(item.user.userId)">
                <span>+</span>关注
              </div> -->
              <i class="iconfont icon-you"></i>
            </div>
            <div class="main" @click="goDynamicDetails(item)" v-if="JSON.parse(item.json).video">
              <p>{{JSON.parse(item.json).msg}}</p>
              <div class="viedoImgBox">
                <div class="viedoImg" v-if="item.json">
                  <img :src="JSON.parse(item.json).video.coverUrl" />
                </div>
                <div class="mask"></div>
                <i class="iconfont icon-bofang1 bf"></i>
                <span class="sjx">
                  <i class="iconfont icon-bofangsanjiaoxing"></i>{{Math.floor(Math.random()*10000)+1000}}
                </span>
                <span class="tj">
                  <i class="iconfont icon-tongji"></i>
                  {{time(JSON.parse(item.json).video.durationms)}}
                </span>
              </div>
            </div>
            <!-- <div class="allIcoN" v-if="JSON.parse(item.json).video">
              <span>
                <i class="iconfont icon-xunzhao1"></i>
                {{item.forwardCount}}
              </span>
              <span>
                <i class="iconfont icon-pinglun"></i>
                {{item.info.commentCount}}
              </span>
              <span>
                <i class="iconfont icon-dianzan"></i>
                {{item.info.likedCount}}
              </span>
              <p>
                <i class="iconfont icon-dashujukeshihuaico-"></i>
              </p>
            </div> -->
          </div>
          <!-- 内容 end-->
        </div>
      </template>
      <div class="load">奋力加载中...</div>
    </van-pull-refresh>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      dynamicList: "",
      isLoading: false
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 动态请求
    getEvent() {
      this.$http("/event", {
        params: {
          pagesize: 30
        }
      }).then(res => {
        console.log(res.data.event);
        this.dynamicList = res.data.event;

        console.log(JSON.parse(this.dynamicList[0].json));
      });
    },
    time: util.time,
    // 关注
    follow(userId) {
      console.log(123);
      this.$http("/follow", {
        params: {
          id: userId,
          t: 1
        }
      }).then(res => {
        this.$toast.fail('关注失败');
        console.log(res);
      });
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.$http("/event", {
          params: {
            pagesize: 30
          }
        }).then(res => {
          console.log(res.data.event);
          this.dynamicList = res.data.event;

          console.log(JSON.parse(this.dynamicList[0].json));
        });
      }, 500);
    },
    // 跳转到详情页
    goDynamicDetails(item){
      this.$router.push({
        name:'dynamicReview',
        params:{
          arr:JSON.stringify(item)
        }       
      })
    }
  },
  created() {
    this.getEvent();
   
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.dynamic {
  .dynamicBox {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    border-bottom: 1px solid #ccc;
    padding: vw(20) vw(20) 0;

    .headImg {
      width: vw(50);
      position: relative;
      padding: vw(5) 0 0 vw(5);
      // z-index: 0;
      .head {
        width: vw(40);
        height: vw(40);
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
        }
      }
      span {
        position: absolute;
        bottom: vw(2);
        right: vw(-2);
        display: block;
        width: vw(15);
        height: vw(15);
        line-height: vw(15);
        text-align: center;
        background: #f00;
        color: #fff;
        border-radius: 50%;
        font-size: vw(14);
      }
    }
    .dynamicContent {
      width: 100%;
      margin-left: vw(10);
      // z-index: -;
      .dynamicContent_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          span {
            font-size: vw(14);
            color: #333;
          }
          .name {
            color: deepskyblue;
            padding-right: vw(6);
          }
          p {
            font-size: vw(12);
            color: #aaa;
          }
        }
        .btn {
          width: vw(60);
          height: vw(24);
          line-height: vw(24);
          text-align: center;
          background: #f00;
          border-radius: vw(20);
          color: #fff;
          font-size: vw(10);
          span {
            font-size: vw(14);
          }
        }
      }
      .main {
        p {
          font-size: vw(16);
          color: #000;
          padding: vw(6) 0;
        }
        .viedoImgBox {
          width: 100%;
          position: relative;
          .viedoImg {
            width: 100%;
            height: vw(155);
            border-radius: vw(15);
            overflow: hidden;

            img {
              width: 100%;
            }
          }
          .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: vw(155);
            background: rgba(0, 0, 0, 0.5);
            border-radius: vw(15);
            overflow: hidden;
          }
          .bf {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: vw(20);
            color: #ccc;
          }

          .sjx {
            position: absolute;
            bottom: vw(10);
            left: vw(6);
            color: #fff;
            display: flex;
            align-items: center;
            font-size: vw(12);
            i {
              font-size: vw(12);
              color: #fff;
              padding-right: vw(2);
            }
          }
          .tj {
            position: absolute;
            bottom: vw(10);
            right: vw(6);
            font-size: vw(12);
            color: #fff;
            display: flex;
            align-items: center;
            i {
              font-size: vw(10);
              color: #fff;
              padding-right: vw(6);
            }
          }
        }
      }
      .allIcoN {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: vw(10) 0;
        span {
          font-size: vw(12);
          color: #777;

          i {
            font-size: vw(16);
            color: #000;
            padding-right: vw(2);
          }
        }
        p {
          i {
            font-size: vw(26);
            color: #000;
          }
        }
      }
    }
  }
  .load {
    text-align: center;
    font-size: vw(20);
    color: #777;
  }
}
</style>